<template>
  <div class="labels">
    <div class="titleBox">
      <p class="title">已添加的标注</p>
      <span class="hide" @click="toggleLabels">
        {{ isShowLabels ? '隐藏标签' : '显示标签' }}</span
      >
    </div>
    <el-scrollbar
      :height="
        props.isShowSettingForm
          ? `calc(100vh - 40px - 550px + 73px)`
          : `calc(100vh - 40px - 550px + 134px + 22px)`
      "
    >
      <div v-for="item in props.labels" :key="item.id" class="label">
        <p @click="handleLabelClick(item)">{{ item.name }}</p>
        <span @click="handleDelete(item)">
          <el-icon color="#F56C6C"> <Delete /> </el-icon>
        </span>
      </div>
      <el-empty v-if="!props.labels.length" description="暂无标注" />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ILabel } from '../hooks/useThree'

const props = defineProps<{
  labels: ILabel[]
  isShowSettingForm: boolean
  isShowLabels: boolean
}>()
interface EmitsType {
  (e: 'labelClick', item: ILabel): void
  (e: 'deleteLabel', value: ILabel): void
  (e: 'toggleLabels'): void
}
const emit = defineEmits<EmitsType>()

const handleLabelClick = (item: ILabel) => {
  emit('labelClick', item)
}

const handleDelete = (item: ILabel) => {
  emit('deleteLabel', item)
}

const toggleLabels = () => {
  emit('toggleLabels')
}
</script>

<style scoped lang="scss">
.labels {
  padding: 10px;
  .titleBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #f5f5f5;
    }
    .hide {
      color: #f5f5f5;
      cursor: pointer;
    }
  }

  .label {
    color: #f5f5f5;
    padding: 4px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:hover {
      background-color: #333;
    }
    p {
      line-height: 1.5;
      width: 90%;
    }
  }
}
</style>
